import React, {Component} from 'react'

import {renderRoutes} from 'react-router-config'

import Tabs from '$components/layout/tabs/Tabs'
import Nav from '$components/layout/nav/Nav'
import Content from '$components/layout/content/Content'

import './app.less'

class App extends Component {
    constructor(props) {
        super(props)

        this.state = {
            historyArr: [
                
            ]
        }

        this.loStorage = window.localStorage
        this.seStorage = window.sessionStorage

        this.checkHistory = ::this.checkHistory
        this.addHistoryRecord = ::this.addHistoryRecord
    }

    componentDidMount() {
        this.checkHistory()
    }

    /**
     * 添加历史记录
     * @param {pathname} 路径名
     */
    addHistoryRecord(pathObj) {
        let {historyArr} = this.state
        historyArr.push(pathObj)

        this.setState({
            historyArr: historyArr
        },() => {
            this.loStorage.setItem('historyArr', JSON.stringify(historyArr))
        })
    }

    /**
     * 检查是否有历史记录，有则渲染
     */
    checkHistory(pathObj) {
        let {historyArr} = this.loStorage

        if(historyArr) {
            let obj = JSON.parse(historyArr)
            
            return this.setState({
                historyArr: obj
            },() => {
                pathObj && this.addHistoryRecord(pathObj)
            })
        }

        return pathObj && this.addHistoryRecord(pathObj)
        
    }

    render() {
        let {historyArr} = this.state

        return (
            <div className='root-container'>
                <Tabs />
                <Nav 
                    navigator={this.props} 
                    historyList={historyArr} 
                    checkRecord={this.checkHistory} 
                />
                <Content routes={this.props.route.routes} />
            </div>
        )
    }
}

export default App